<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-07-04 08:12:13
 * @LastEditTime : 2023-07-18 16:49:29
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/notice/video-detail.vue
 * @Description  : -
-->
<template>
  <div class="app-container" v-loading="loading">
    <h2 class="container-title">{{ form.title }}</h2>
    <p class="container-time">{{ form.createTime }}</p>
    <div class="container-video">
      <video
        v-if="form.videoUrl"
        id="video"
        :src="form.videoUrl"
        :poster="form.coverUrl"
        controls
        preload="auto"
        width="50%"
        style="object-fit: fill"
      ></video>
    </div>
  </div>
</template>

<script>
import { detail } from "@/api/notice/video";
import store from '@/store';
export default {
  name: "VideoDetail",
  data() {
    return {
      loading: false,
      form: {}
    };
  },
  created() {
    if (this.$route.params.id) this.detailFn(this.$route.params.id);
  },
  methods: {
    detailFn(id) {
      this.loading = true;
      detail(id).then(response => {
        this.loading = false;
        var videoUrl = response.data.videoUrl;
        var coverUrl = response.data.coverUrl;
        if (videoUrl) {
          if (videoUrl.indexOf('http://') === -1 && videoUrl.indexOf('https://') === -1) videoUrl = store.getters.domain + videoUrl
        }
        if (coverUrl) {
          if (coverUrl.indexOf('http://') === -1 && coverUrl.indexOf('https://') === -1) coverUrl = store.getters.domain + coverUrl
        }
        this.form = response.data;
        this.$set(this.form, 'videoUrl', videoUrl);
        this.$set(this.form, 'coverUrl', coverUrl);
      });
    },
  }
};
</script>

<style lang="scss">
.app-container {
  .container-title {
    text-align: center;
    margin: 0;
    padding: 30px 0 0;
  }
  .container-time {
    text-align: center;
    padding: 10px;
  }
  .container-video {
    display: flex;
    justify-content: center;
  }
}
</style>